<span page-title ng-model="activationKey">{{ 'Activation Key:' | translate }} {{ activationKey.name }}</span>

<div data-extend-template="layouts/details-page-with-breadcrumbs.html">
  <header data-block="header">
    <h2>{{ activationKey.name }}</h2>
  </header>

  <div data-block="item-actions" bst-feature-flag="custom_products">
    <span select-action-dropdown>
      <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu">
        <li role="menuitem" ng-hide="denied('create_activation_key')">
          <a ui-sref="activation-key.copy" translate>
            Copy Activation Key
          </a>
        </li>

        <li class="divider"></li>

        <li role="menuitem" ng-hide="denied('destroy_activation_keys', activationKey)">
          <a ng-click="openModal()" translate>
            Remove
          </a>
        </li>
      </ul>

      <div bst-modal="removeActivationKey(activationKey)" model="activationKey">
        <div data-block="modal-header" translate>Remove Activation Key "{{ activationKey.name }}"?</div>
        <div data-block="modal-body" translate>Are you sure you want to remove Activation Key "{{ activationKey.name }}"?</div>
      </div>
    </span>
  </div>

  <nav data-block="navigation">
    <div content-access-mode-banner></div>
    <ul class="nav nav-tabs details-nav">
      <li ng-class="{active: isState('activation-key.info')}">
        <a ui-sref="activation-key.info">
          <span translate>
            Details
          </span>
        </a>
      </li>
      <li ng-class="{active: stateIncludes('activation-key.subscriptions')}"  ng-hide="simpleContentAccessEnabled">
        <a ui-sref="activation-key.subscriptions.list">
          <span translate>
            Subscriptions
          </span>
        </a>
      </li>
      <li ng-class="{active: stateIncludes('activation-key.products')}">
        <a ui-sref="activation-key.products">
          <span translate>
            Repository Sets
          </span>
        </a>
      </li>
      <li ng-class="{active: stateIncludes('activation-key.host-collections')}">
        <a ui-sref="activation-key.host-collections.list">
          <span translate>
            Host Collections
          </span>
        </a>
      </li>
      <li class="dropdown" uib-dropdown
          ng-class="{active: stateIncludes('activation-key.associations-content-hosts')}">
        <a uib-dropdown-toggle>
          <span translate>Associations</span>
          <i class="fa fa-chevron-down"></i>
        </a>
        <ul class="dropdown-menu" uib-dropdown-menu>
          <li>
            <a ui-sref="activation-key.associations-content-hosts({activationKeyId: activationKey.id})" translate>
              Content Hosts
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>

  <section data-block="content">
    <div ui-view></div>
  </section>
</div>
